<template>
  <v-chart
    ref="vChartRef"
    :option="option"
    autoresize
    style="width: 100%; height: 200px"
  ></v-chart>
</template>

<script setup>
import { ref, defineProps, defineExpose } from "vue";
import VChart, { THEME_KEY } from "vue-echarts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart } from "echarts/charts";
import { graphic } from "echarts";
import {
  DatasetComponent,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  ToolboxComponent,
} from "echarts/components";

const option = ref({
  backgroundColor: "rgba(0, 0, 0, 0)",
  grid: {
    left: "5%",
    right: "3%",
    bottom: "5%",
    top: "16%",
    containLabel: true,
  },
  legend: {
    top: "0%",
    left: "right",
    type: "scroll",
    textStyle: {
      color: "#fff",
      fontSize: "14px",
    },
  },
  tooltip: {
    show: true,
    trigger: "axis",
    axisPointer: {
      show: true,
      type: "shadow",
    },
  },
  xAxis: {
    show: true,
    type: "category",
    data: [],
    axisLabel: {
      inside: false, // 标签刻度朝内
      textStyle: {
        align: "center", // 文字右对齐
        color: "#ffffff",
      },
    },
  },
  yAxis: {
    show: true,
    type: "value",
    axisLabel: {
      // inside: true, // 标签刻度朝内
      margin: 0, // 清除默认间距
      padding: [0, 10, 0, 0], // 右边内边距10
      textStyle: {
        align: "right", // 文字右对齐
        color: "#ffffff",
      },
    },
  },
  series: [],
});
use([
  DatasetComponent,
  CanvasRenderer,
  BarChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  ToolboxComponent,
]);
const setData = (data) => {
  option.value = {
    backgroundColor: "rgba(0, 0, 0, 0)",
    grid: {
      left: "0%",
      right: "3%",
      bottom: "5%",
      top: "15%",
      containLabel: true,
    },
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: {
        show: true,
        type: "shadow",
      },
    },
    legend: {
      top: "0%",
      left: "right",
      type: "scroll",
      textStyle: {
        color: "#fff",
        fontSize: "14px",
      },
    },
    xAxis: {
      show: true,
      type: "category",
      data: data.xAxis,
      axisLabel: {
        inside: false, // 标签刻度朝内
        textStyle: {
          align: "center", // 文字右对齐
          color: "#888",
        },
      },
    },
    yAxis: {
      show: true,
      type: "value",
      axisLabel: {
        inside: false, // 标签刻度朝内
        margin: 20, // 清除默认间距
        padding: [0, 10, 0, 0], // 右边内边距10
        textStyle: {
          align: "rgba(255, 255, 255, 0.2)", // 文字右对齐
          color: "#888",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#888",
          type: "solid",
        },
      },
      // splitLine: {
      //   lineStyle: {
      //     color: "#ffffffaa",
      //     type: "solid",
      //   },
      // }, //设置
    },
    series: [
      {
        name: "一般",
        type: "bar",
        data: data.yb,
        itemStyle: {
          //通常情况下：
          normal: {
            textStyle: {
              align: "center",
            },
            color: new graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: "rgba(49, 239, 251, 0)",
              },
              {
                offset: 1,
                color: "#31EFFB",
              },
            ]),
          },
          //鼠标悬停时：
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
      {
        name: "重大",
        type: "bar",
        data: data.zd,
        itemStyle: {
          //通常情况下：
          normal: {
            textStyle: {
              align: "center",
            },
            color: new graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: "rgba(248, 160, 123, 0)",
              },
              {
                offset: 1,
                color: "#F8A07B",
              },
            ]),
          },
          //鼠标悬停时：
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
};
defineExpose({
  setData,
});
</script>
